<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <div style="padding-bottom:0">
        <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline">
          <el-form-item label="宝贝编号：" prop="commodity_id">
            <el-input
              v-model="query.commodity_id"
              clearable
              placeholder=""
              style="width:180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="宝贝名称：" prop="commodity_name">
            <el-input
              v-model="query.commodity_name"
              clearable
              placeholder=""
              style="width:180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="操作者：" prop="user">
            <el-input
              v-model="query.user"
              clearable
              placeholder="id或姓名"
              style="width:180px;"
              class="filter-item"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item label="操作时间：">
            <el-date-picker
              v-model="queryOrderDate"
              :picker-options="pickerOptions2"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @keyup.enter.native="toQuery"/>
          </el-form-item>
          <el-form-item >
            <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
        <el-table-column label="宝贝编号" prop="commodity_id" show-overflow-tooltip width="120" align="center" />
        <el-table-column label="宝贝名称" prop="commodity_name" show-overflow-tooltip width="120" align="center" />
        <el-table-column label="成本价" prop="cost_price" align="center" />
        <el-table-column label="会员价" prop="vip_price" align="center" />
        <el-table-column label="专柜价" prop="counter_price" align="center" />
        <el-table-column label="佣金总额" prop="commission" align="center" />
        <el-table-column label="分享立省" prop="share_save" align="center" />
        <el-table-column label="编辑入口" prop="active_type" align="center" >
          <template slot-scope="scope">
            <div v-if="scope.row.active_type === 0">商品管理</div>
            <div v-if="scope.row.active_type === 1">限时秒杀</div>
            <div v-if="scope.row.active_type === 2">超值拼团</div>
            <div v-if="scope.row.active_type === 3">特价专区</div>
          </template>
        </el-table-column>
        <el-table-column label="活动价" prop="active_price" align="center" />
        <el-table-column label="活动佣金总额" prop="active_commission" width="120" align="center" />
        <el-table-column label="活动分享立省" prop="active_share_save" width="120" align="center" />
        <el-table-column label="操作类型" prop="remark" width="100" align="center" />
        <el-table-column label="操作者id" prop="user_id" align="center" />
        <el-table-column label="操作者姓名" prop="user_name" align="center" />
        <el-table-column label="ip地址" prop="ip_config" width="120" align="center" />
        <el-table-column label="创建时间" prop="update_date" width="140" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(Number(scope.row.update_date)) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        background
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
export default {
  components: { },
  mixins: [initData],
  data() {
    return {
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      query: {
        commodity_id: '',
        commodity_name: '',
        user: '',
        time: ''
      },
      queryOrderDate: ['', '']
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = 'api/commodity-log'
      const sort = 'update_date'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const commodity_id = query.commodity_id
      const commodity_name = query.commodity_name
      const user = query.user
      if (this.queryOrderDate[0] !== '' && this.queryOrderDate[0] !== null) {
        query.time = this.queryOrderDate.map(function(item) {
          return parseTime(item, true)
        }).join('~')
      }
      const time = query.time
      if (commodity_id && commodity_id !== '' && commodity_id !== null) { this.params['commodity_id'] = commodity_id }
      if (commodity_name && commodity_name !== '' && commodity_name !== null) { this.params['commodity_name'] = commodity_name }
      if (user && user !== '' && user !== null) { this.params['user'] = user }
      if (time && time !== '' && time !== null) { this.params['time'] = time }
      return true
    },
    resetQuery() {
      this.$refs['query'].resetFields()
      this.queryOrderDate = ['', '']
      this.init()
    }
  }
}
</script>

<style scoped>

</style>
